<template>
  <q-header
    bordered
    class="bg-white text-dark row"
    v-if="$store.getters['persisted/accounts'].length > 0"
  >
    <accounts-tabs
      v-model="data.account.tab"
      v-model:account="data.account.value"
      inline-label
      outside-arrows
      mobile-arrows
      :breakpoint="0"
      class="col-auto"
    ></accounts-tabs>
  </q-header>
</template>

<script>
import { defineComponent, reactive, watch, inject, nextTick } from "vue";
import AccountsTabs from "src/components/AccountsTabs.vue";
import { fetchChanceTypeCount } from "src/assets/fetch";

export default defineComponent({
  name: "ComponentsHeadersChanceHeaderVue",
  components: { AccountsTabs },
  setup() {
    const bus = inject("bus");
    const data = reactive({
      account: {
        tab: 0,
        value: null,
      },
      type: {
        tab: 0,
        // 类型(0全部-默认 1今日需跟进 2待受理 3跟进中 4已结束 5已转化)
        opitons: [
          { label: "全部", name: 0, value: 0, key: "totalCount" },
          { label: "今日需跟进", name: 1, value: 0, key: "currentFollowCount" },
          { label: "待受理", name: 2, value: 0, key: "acceptCount" },
          { label: "跟进中", name: 3, value: 0, key: "followCount" },
          { label: "已结束", name: 4, value: 0, key: "doneCount" },
          { label: "已转化", name: 5, value: 0, key: "convertedCount" },
        ],
      },
    });
    watch(
      () => data.account.value,
      (acc) => {
        if (!!acc) {
          fetchChanceTypeCount(acc.cookie).then((res) => {
            data.type.opitons.forEach((el) => {
              el.value = res.data[el.key];
            });
          });
        }
      }
    );

    watch(
      () => data.account.tab,
      (val) => {
        nextTick(() => bus.emit("changeAccountTab", val));
      },
      { immediate: true }
    );

    watch(
      () => data.type.tab,
      (val) => {
        nextTick(() => bus.emit("changeTypeTab", val));
      },
      { immediate: true }
    );
    return { data };
  },
});
</script>
